<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./练习2样式.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="./修罗.webp"></li>
            <li><img src="./刑天.webp"></li>
            <li><img src="./战神刑天.jpg"></li>
            <li><img src="./金刚.webp"></li>
            <li><img src="./飞影.webp"></li>
            <li><img src="./蔡徐坤.webp"></li>
        </ul>
        <span class="iconfont icon-a-11 rbut"></span>
        <span class="iconfont icon-lujing lbut"></span>
        <ol>
            <li index="0"></li>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
            <li index="4"></li>
            <li index="5"></li>
        </ol>
    </div>
</body>

</html>
<script>
    var ul = document.querySelector('ul')
    var lbut = document.querySelector('.lbut')
    var rbut = document.querySelector('.rbut')
    var imgs = document.querySelectorAll('.box li img')
    var box = document.querySelector('.box')
    var lis = document.querySelectorAll('.box ol li')
    var time

    var num = 0//当前图片索引
    var circle = 0 //当前显示背景颜色的小圆圈的索引
    var imgsCount = imgs.length//不包括克隆节点的真实图片数量

    //克隆第一张图片到末尾以实现无缝滚动
    var firstClone = ul.children[0].cloneNode(true)
    ul.appendChild(firstClone)
    rbut.onclick = function () {
        num++
        if (num > imgsCount) {//到达最后一张真实图片后
            ul.style.transition = 'none'//禁用过度效果
            ul.style.transform = `translateX(0px)`
            num = 1
            setTimeout(() => {//延迟执行以确保样式更新
                ul.style.transition = 'all .5s'
                ul.style.transform = `translate(${-num * 600}px)`
            }, 16)//一个动画帧的时间约为16ms
        } else {
            ul.style.transition = 'all .5s'
            ul.style.transform = `translateX(${-num * 600}px)`
        }
        circle = (circle + 1) % lis.length
        change(circle)
    }
    lbut.onclick = function () {
        num++
        if (num === 0) {//到达最后一张真实图片后
            ul.style.transition = 'none'//禁用过度效果
            num = imgsCount//设置为最后一张真实图片的索引
            ul.style.transform = `translateX(${-num * 600}px)`
            setTimeout(() => {//延迟执行以确保样式更新
                ul.style.transition = 'all .5s'
                num--
                ul.style.transform = `translateX(${-num * 600}px)`
            }, 16)//一个动画帧的时间约为16ms
        } else {
            num--
            ul.style.transition = 'all .5s'
            ul.style.transform = `translate(${-num * 600}px)`
        }
        circle = (circle + 1 + lis.length) % lis.length
        change(circle)
    }
    box.onmouseenter = function () {
        lbut.style.display = 'block'
        rbut.style.display = 'block'
        clearInterval(time)
    }
    box.onmouseleave = function () {
        lbut.style.display = 'none'
        rbut.style.display = 'none'
        startLunbo()
    }
    function startLunbo() {
        time = setInterval(function () {
            rbut.onclick()
        }, 2000)
    }
    startLunbo()
    for (i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            var index = this.getAttribute('index')
            num = index
            ul.style.transform = `translateX(${-num * 600}px)`
            caches(num)
        }
    }
    function change(index) {
        for (i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = 'white'
        }
        lis[index].style.backgroundColor = 'red'
    }
</script>